<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>球体</title>
    <style>
        /**
        这里说一下：
        radial-gradient() 函数 使用用径向渐变创建 "图像"
        径向渐变由中心点定义。为了创建径向渐变所以必须设置两个终止色。
        css语法：background-image: radial-gradient(shape size at position, start-color, ..., last-color);
        其中：
        shape 确定圆的类型 ellipse (默认): 指定椭圆形的径向渐变。circle ：指定圆形的径向渐变

        size：定义渐变的大小，可能值：
                farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
                closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
                closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
                farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
        
        position：定义渐变的位置。可能值：
                  center（默认）：设置中间为径向渐变圆心的纵坐标值。
                  top：设置顶部为径向渐变圆心的纵坐标值。
                  bottom：设置底部为径向渐变圆心的纵坐标值

        start-color, ..., last-color:用于指定渐变的起止颜色。

        还有一个渐变是线性渐变，linear-gradient 有兴趣可以去了解一下
        */
        .sphere{
            height: 200px;
            width: 200px;
            border-radius: 50%;
            background: radial-gradient(circle  at center,skyblue,tomato);
        }
    </style>
</head>
<body>
    <div class="sphere"></div>
</body>

</html>